<template>
    <div>
        <div v-if="mod=='normal'">
            <a-button type="primary" @click="mod = 'add'" style="margin-bottom:20px;">添加账号</a-button>
            <standard-table
                rowKey="name"
                :columns="columns"
                :dataSource="dataSource"
                :pagination="false"
            >
                <div slot="action" slot-scope="{record}" >
                    <a-popconfirm title="确定选择？" ok-text="选择" cancel-text="取消" @confirm='chooseBduss(record.name)'>
                    <a href="javascript:;">
                        <a-icon type="copy" />选择账号
                    </a>
                    </a-popconfirm>
                    <a href="javascript:;" @click="editDanmu(record.name)">
                        <a-icon type="edit" />编辑账号
                    </a>
                </div>
            </standard-table>
        </div>
        <div v-if="mod == 'add' || mod == 'edit'">
            <div style="margin-bottom:20px;">
                <a-button type="primary" @click="add" :loading="addDanmu_loading">{{mod == 'add'?'添加':'编辑'}}账号</a-button>
                <a-button type="danger" @click="mod = 'normal'" style="margin-left:20px;">取消{{mod == 'add'?'添加':'编辑'}}</a-button>
            </div>
            <div>
                <a-input :disabled="mod != 'add'" placeholder="请输入账号名称" v-model="name" style="margin-bottom:20px;"/>
                <m-textline :values="bduss" title="百度BDUSS账号" @change="changeTextLine" />
            </div>
        </div>
    </div>
</template>

<script>
import StandardTable from '@/components/table/StandardTable'
import { addBduss, getZhanghaoList, getBdussDetail } from '@/api/zhibo/baidu'
export default {
    name:'danmuList',
    data() {
        return {
            mod:'normal',
            name:'',
            bduss:[],
            addDanmu_loading:false,
            dataSource:[],
            columns:[
                {
                    title: '账号名称',
                    dataIndex: 'name',
                },
                {
                    title: '操作',
                    width:300,
                    scopedSlots: { customRender: 'action' }
                }
            ]
        }
    },
    created(){
        this.getZhanghaoList()
    },
    methods:{
        chooseBduss(name){
            this.$emit('success',name)
        },
        getZhanghaoList(){
            getZhanghaoList({}).then(res=>{
                if(res.errcode == 200){
                    this.dataSource = res.data
                }
            })
        },
        add(){
            let params = {
                name: this.name,
                bduss: this.bduss,
            }
            this.addDanmu_loading = true
            addBduss(params).then((res)=>{
                this.addDanmu_loading = false
                if(res.errcode == 200){
                    let t = this.mod == 'add'?'添加':'编辑'
                    this.$message.success(t+'成功')
                    this.mod = 'normal'
                    this.getZhanghaoList()
                }
            }).catch(()=>{
                this.addDanmu_loading = false
            })
        },
        editDanmu(name){
            this.mod = 'edit'
            getBdussDetail({name}).then((res)=>{
                if(res.errcode == 200){
                    this.name = res.data.name
                    this.bduss = res.data.bduss
                }
            })
        },
        changeTextLine(val){
            this.bduss = val
        },
    },
    props:{
        value:Boolean,
        url:String
    },
    watch:{
        mod(e){
            if(e == 'add'){
                this.name = ''
                this.danmu = []
                this.huifuDanmu = []
            }
        },
        value(e){
            if(e){
                this.getZhanghaoList()
            }
        }
    },
    components:{StandardTable}
}
</script>